<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blogger.css">
    <!-- <link rel="stylesheet" href="./css/blog_content.css"> -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- <link rel="stylesheet" href="editor.md/css/editormd.min.css" /> -->
</head>

<body onload="getUserInfo()">
    <div class="blogger">
        <div id="preview">
            <!-- 头像 -->
            <img id="avatar">
            <!-- 昵称/用户名 -->
            <h3 id="nicknameOrUsername">请先登录</h3>

        </div>

        <!-- 邮箱 -->
        <div class="info-row">
            <div class="type">邮箱:</div>
            <div id="email" class="info"></div><br>
        </div>

        <!-- 性别 -->
        <div class="info-row">
            <div class="type">性别:</div>
            <div id="gender" class="info"></div><br>
        </div>

        <!-- 描述 -->
        <div class="info-row">
            <div class="type">描述:</div>
            <div id="desc" class="info"></div><br>
        </div>


        <div class="counter_title">
            <div class="type">文章 <div id="textNum" class="number"></div>
            </div>
            <div class="divider">|</div>
            <div class="type">分类 <div id="kindNum" class="number"></div>
            </div>
        </div>

        <div class="counter_details">
            <div id="blog-count"></div>
            <div id="category-count"></div>
        </div>
        <div>
            <form action="http://47.98.20.202:8080/userDetail" target="_top" method="GET">
                <input type="submit" value="编辑信息" class="btn">
            </form>
        </div>
    </div>
</body>

<script>
    //信息获取
    function getUserInfo() {
        //登录验证
        if (localStorage.getItem('token')) {


            const avatar = document.querySelector('#avatar')//头像
            const nicknameOrUsername = document.querySelector('#nicknameOrUsername')//昵称
            const email = document.querySelector('#email')//邮箱
            const gender = document.querySelector('#gender')//性别
            const desc = document.querySelector('#desc')//描述
            const textNum = document.querySelector('#textNum')//文章数
            const kindNum = document.querySelector('#kindNum')//分类数

            //个人信息获取
            axios(`http://47.98.20.202:8000/user/${localStorage.getItem('token')}/getUserDetail/`)
                .then(res => {
                    const data = res.data.data;

                    avatar.src = data.avatar ? data.avatar : "";
                    nicknameOrUsername.innerHTML = data.nickname ? data.nickname : data.username;
                    email.innerHTML = data.email === null ? '未设置' : data.email;
                    gender.innerHTML = data.gender === 0 ? '男' : '女';
                    desc.innerHTML = data.desc === null ? '未设置' : data.desc;

                })
                .catch(error => {
                    console.error('Error:', error);
                });


            //文章数、分类数获取
            axios('http://47.98.20.202:8000/topics/getTopicList/')
                .then(res => {
                    const data = res.data.data;

                    // console.log("博客:", data);

                    //统计文章数量
                    const result = data.filter(item => item.t_uid === Number(localStorage.getItem('token')));

                    // console.log("博客:", result);

                    textNum.innerHTML = result.length === 0 ? 0 : result.length;


                    // 统计类别数量
                    const kindCount = {};
                    result.forEach((item) => {
                        if (kindCount[item.t_kind]) {
                            kindCount[item.t_kind]++
                        } else {
                            kindCount[item.t_kind] = 1
                        }
                    })
                    
                    kindNum.innerHTML = Object.keys(kindCount).length === 0 ? 0 : Object.keys(kindCount).length;
                    

                })
                .catch(error => {
                    console.error('Error:', error);
                });





        }
    }


</script>

</html>